
import React, { useEffect, useState } from "react"
import { comRequest } from '../../request'
import { Divider, Spin, Rate, Tooltip } from 'antd'
import { formarPricelColor, } from './config'
import { WarningOutlined } from '@ant-design/icons'
import './index.less'
export const PriceInfo = ({ currentPrice, id, isSz, type, cjlNumber }) => {
    const [dataInfo, setDataInfo] = useState({})
    const [isLoading, setIsLoading] = useState(false)


    const getInfo = async () => {
        let cecid = isSz ? `12.${id}` : `10.${id}`
        const detailUrl = `
https://push2.eastmoney.com/api/qt/stock/get?invt=2&fltt=1&fields=f58%2Cf107%2Cf57%2Cf43%2Cf59%2Cf169%2Cf170%2Cf152%2Cf412%2Cf413%2Cf407%2Cf411%2Cf406%2Cf401%2Cf403%2Cf402%2Cf404%2Cf405%2Cf130%2Cf131%2Cf46%2Cf60%2Cf44%2Cf45%2Cf133%2Cf132%2Cf134%2Cf47%2Cf48%2Cf19%2Cf17%2Cf531%2Cf15%2Cf13%2Cf11%2Cf20%2Cf18%2Cf16%2Cf14%2Cf12%2Cf39%2Cf37%2Cf35%2Cf33%2Cf31%2Cf40%2Cf38%2Cf36%2Cf34%2Cf32%2Cf211%2Cf212%2Cf213%2Cf214%2Cf215%2Cf210%2Cf209%2Cf208%2Cf207%2Cf206%2Cf161%2Cf49%2Cf171%2Cf50%2Cf86%2Cf168%2Cf108%2Cf167%2Cf71%2Cf292%2Cf51%2Cf52%2Cf191%2Cf192%2Cf452&secid=${cecid}&ut=fa5fd1943c7b386f172d6893dbfba10b&wbp2u=%7C0%7C0%7C0%7Cweb&dect=1&_=1729933416755`

        try {
            setIsLoading(true)
            const detailData = await comRequest({
                url: detailUrl,
            })
            const fomartDeatilData = (info) => {
                if (type === 'put') {
                    return {
                        call_max: info?.f44,
                        call_min: info?.f45,
                    }
                }
                return {
                    call_max: info?.f44,
                    call_min: info?.f45,
                }
            }
            const detailInfo = detailData?.data?.data
            const newDetail = fomartDeatilData(detailInfo)
            console.log("newDetail", newDetail)
            setIsLoading(false)
            setDataInfo(newDetail)
        } catch (error) {
            console.log("error", error)
            setIsLoading(false)
        }

    }
    useEffect(() => {
        if (id) {
            getInfo()
        }

    }, [id])

    return <div >
        <Spin tip="Loading" size="small" spinning={isLoading}>
            <div className="priceBox">


                {dataInfo?.call_min && <div style={{
                    color: formarPricelColor(dataInfo?.call_min, type),

                }}
                    className='priceItem'
                > 最低：
                    {
                        dataInfo?.call_min
                    }
                </div>}

                <div style={{
                    color: formarPricelColor(currentPrice, type),

                }}
                    className='priceItem'
                >最新：
                    {
                        currentPrice
                    }
                    {
                        currentPrice >= 500 && currentPrice < 1800 && cjlNumber > 4000 ? <Rate value={1} count={1}
                            style={{
                                color: formarPricelColor(currentPrice, type)
                            }}
                            tooltips={['价格在500-1800之间的合约']}
                        /> : null
                    }
                    {cjlNumber < 8000 ? <span style={{
                        color: 'red',
                        fontSize: '16px',
                        marginLeft: '4px'
                    }}>


                        <Tooltip placement="top" title={'持仓量小于8000谨慎操作'} >
                            <WarningOutlined />
                        </Tooltip>
                    </span> : ''}

                </div>

                {dataInfo?.call_max &&
                    <div className='priceItem' style={{
                        color: formarPricelColor(dataInfo?.call_max, type),
                    }}>
                        最高：{
                            dataInfo?.call_max
                        }</div>}
                {
                    dataInfo?.call_max && dataInfo?.call_min && <div className='priceItem' style={{
                        color: dataInfo?.call_max - dataInfo?.call_min >= 500 ? 'green' : '',
                    }}>
                        价差：{
                            (dataInfo?.call_max - dataInfo?.call_min) || ''
                        }</div>
                }
            </div>

        </Spin>
    </div>
}